import PropTypes from 'prop-types'
import React, { memo } from 'react'
import { PaginationWrapper } from './style';
import { Pagination } from '@mui/material';
import { shallowEqual, useDispatch, useSelector } from 'react-redux';
import { fetchEntireDataAction } from '@/store/modules/entire/createActions';

const EntirePagination = memo((props) => {
  const { currentPage, roomList, totalCount } = useSelector(state=>({
    currentPage:state.entire.currentPage,
    roomList:state.entire.roomList,
    totalCount:state.entire.totalCount,
  }), shallowEqual)

  const totalPage = Math.ceil(totalCount/20); // 向上取整
  const startCount = currentPage * 20 + 1;
  const endCount = (currentPage + 1) * 20;

  const dispacth = useDispatch()
  function changePageHandler(page){
    window.scrollTo({ top: 0, behavior: 'smooth', })
    dispacth(fetchEntireDataAction(page-1))
  }
  return (
    <PaginationWrapper>
      { !!roomList.length && <div className="info">
          <Pagination size="small" count={totalPage} onChange={(e, page) => changePageHandler(page)} />
          <div className="desc">
            第 {startCount} - {endCount} 个房源，共超过 {totalCount} 个
          </div>
      </div>}
    </PaginationWrapper>
  )
})

EntirePagination.propTypes = {}

export default EntirePagination